<template>
	<view class="lease">
		<!-- #ifdef MP-WEIXIN -->
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
			</view>
		</view>
		<!-- #endif -->
		<view class="headtop">
			<image :src="baseUrl + '/wximage/lease_jinxingzhongbj.png'"></image>
			<view class="nr">
				<view class="title">设备正在推出中</view>
				<view class="desc">请勿走开</view>
			</view>
		</view>
		<view class="bar">
			<view class="bj"></view>
			<view class="jindu clearfix">
				<view class="bjse fl" :style="{width: widthvalue + '%'}"></view>
				<image :src="baseUrl + '/wximage/lease_bar.png'" class="fl" v-if="widthvalue < 90"></image>
			</view>
			<view class="shuzi">{{widthvalue}}%</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				widthvalue: 0,
				timer: null,
				order_danhao: '',
			}
		},
		onLoad(options) {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}
			
			this.order_danhao = options.prepayid;//单号
			if(this.order_danhao){
				this.getTime();
			}
		},
		methods:{
			getTime(){
				let that = this;
				let timer = setInterval(function(){
					if(that.widthvalue<80){
						that.widthvalue = parseInt(that.widthvalue) + 20;
					}
					that.request({
						url: '/orderx/orderinfo1',
						data: {'danhao': that.order_danhao},
						method: "GET"
					}).then(res => {
						if (res.data.code == 200) {
							var all = res.data.data;
							if(all.plug_status!=undefined){
								if(all.plug_status == 1){
									that.widthvalue = 100;
									uni.redirectTo({
										url: '/pages/lease/success?order_danhao=' + that.order_danhao
									})
									clearInterval(timer);
								}
							}
							
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					});
				},1000)
			},
			fanhui() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lease {
		width: 100%;
		margin: 0 auto;
	
		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
	
			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: center;
				color: #333333;
				font-size: 32rpx;
			}
			
			.iconfont {
				position: absolute;
				top: 0;
				left: 14rpx;
				font-size: 44rpx;
			}
		}
		
		.headtop {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 90;
			
			image{
				width: 100%;
				height: 100vh;
				display: flex;
			}
			
			.nr{
				position: absolute;
				top: 290rpx;
				left: 60rpx;
				
				.title{
					font-size: 48rpx;
					color: #333333;
					font-weight: 700;
					margin-bottom: 10rpx;
				}
				
				.desc{
					font-size: 48rpx;
					color: #333333;
					font-weight: 700;
				}
			}
		}
		
		.bar{
			width: 76%;
			position: absolute;
			top: 50%;
			left: 12%;
			z-index: 100;
			
			.bj{
				width: 100%;
				margin: 0 auto;
				background: #fff;
				height: 20rpx;
				border-radius: 10rpx;
			}
			
			.jindu{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				
				.bjse{
					height: 20rpx;
					border-radius: 10rpx;
					background: linear-gradient(90deg, #0FDAC5, #22EFE4);
				}

				
				image{
					width: 130rpx;
					height: 114rpx;
					display: flex;
					margin-top: -50rpx;
					margin-left: -30rpx;
				}
			}
			
			.shuzi{
				width: 100%;
				text-align: center;
				margin-top: 70rpx;
				font-size: 56rpx;
				color: #1DE9DC;
			}
		}
	}
</style>